<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全屏滑动加载</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>

<div class="mask"></div>
<label class="value">0</label>
<input type="range" class="range" value="0" min="0" max="100"/>

  <script>
const value = document.querySelector('.value')
const range = document.querySelector('.range')
const mask = document.querySelector('.mask')
function move(e) {
  const num = e.target.value
  const hue = "hue-rotate(" + num + "deg)"
  value.textContent = num;
  value.style.filter = hue
  range.style.filter = hue
  mask.style.left = num + 'vw'
  mask.style.width = 100 - num + 'vw'
  mask.style.filter = hue
}
range.addEventListener('change',move)
range.addEventListener('mousemove',move)
  </script>
</body>

</html>